    <p id="userIdmessage" style="display: none;">{{userinfo.userId}}</p>
    <p class="prompt"></p>
        <p id="ifnewuser" style="display: none;"></p>
    <p id="viptype" style="display: none;"></p><!--用户身份-->
    <!--登录更改密码的弹窗！！！！-->
    <!-- //弹出框 -->
    <div id="logincover"></div>
    <div id="loginmodal">
        <div id="loginthrer"style="display: none;width: 70%;float: left;">
            <p style="text-align: center;">
                <span style="color: #666;" >邮箱密码登录</span>
            </p>
            <p><input id="emailpasswordemail" autocomplete="off" type="text" placeholder="邮箱"></p>
            <p><input id="emailpasswordpassword" autocomplete="off" type="password" placeholder="密码"></p>
            <p><button id="emailpasswordbtn" style="background-image: linear-gradient(to top, rgb(152, 144, 227) 0%, rgb(177, 244, 207) 100%);border: none;outline: none;color: white;">登录</button></p>
        </div>
        <div id="newpasswordthere" style="display: none;width: 70%;float: left;">
            <p style="text-align: center;">
                <span>找回密码</span>
            </p>
            <p><input id="newpasswordemail" autocomplete="off" type="text" placeholder="邮箱"></p>
            <p><input id="newpasswordepassword"  autocomplete="off" type="password" placeholder="新密码"></p>
            <p><input id="newpassworderepassword"  autocomplete="off" type="password" placeholder="再次输入密码"></p>
            <p><input id="newpasswordcode" autocomplete="off" style="width: 40%;" placeholder="验证码"  type="text" > <button id="newpasswordgetyzm"   style="background-color: #fff;outline: none;border: none;width: 80px;height: 40px;margin-left: 15.2%;">获取验证码</button></p>
            <p><button  id="newpasswordbtn"  style=" background-image: linear-gradient(to top, rgb(152, 144, 227) 0%, rgb(177, 244, 207) 100%);border: none;outline: none;color: white;">找回密码</button></p>
        </div>
        <div id="registerthere" style="height: 420px;display: none;width: 70%;float: left;">
            <p style="text-align: center;">
                <span  style="color: #666;">邮箱注册</span>
            </p>
            <p><input autocomplete="off" id="emailregisteremail" type="text" placeholder="邮箱"></p>
            <p><input autocomplete="off" id="emailregisterpassword"  type="password" placeholder="密码"></p>
            <p><input autocomplete="off" id="emailregisterrepassword"  type="password" placeholder="再次输入密码"></p>
            <p><input autocomplete="off" id="emailregistercode"  style="width: 40%;" placeholder="验证码" type="text"> <button id="getyzm"
                    style="background-color: #fff;outline: none;border: none;width: 80px;height: 40px;margin-left: 15.2%;">获取验证码</button>
            </p>
            <p><button id="emailregisterbtn"  style="background-image: linear-gradient(to top, rgb(152, 144, 227) 0%, rgb(177, 244, 207) 100%);border: none;outline: none;color: white;">立即注册</button></p>
        </div>
        <div id="emailcodeloginthere" style="display: none;width: 70%;float: left;">
            <p style="text-align: center;">
                <span  style="color: #666;">邮箱验证码登录</span>
            </p>
            <p><input id="emailcodeemail" autocomplete="off" type="text" placeholder="邮箱"></p>
            <p><input  id="emailcodecode" autocomplete="off" style="width: 40%;" placeholder="验证码" type="text"> <button   id="emailcodelogingetyzm"
                    style="background-color: #fff;outline: none;border: none;width: 80px;height: 40px;margin-left: 15.2%;">获取验证码</button>
            </p>
            <p><button id="emailcodebtn"  style="background-image: linear-gradient(to top, rgb(152, 144, 227) 0%, rgb(177, 244, 207) 100%);border: none;outline: none;color: white;">立即登录</button></p>
        </div>

        <div id="selfaccountregisterthere"  style="display: none;float: left;width: 70%;border-radius: 10px;background-color: #fff;" >
            <p style="text-align: center;">
                <span  style="color: #666;">自定义账号注册</span>
            </p>
            <p><input autocomplete="off" id="selfaccountregisteraccount" type="text" placeholder="账号"></p>
            <p><input autocomplete="off" id="selfaccountregisterpassword" type="password" placeholder="密码"></p>
            <p><button id="selfaccountregisterbtn"  style="background-image: linear-gradient(to top, rgb(152, 144, 227) 0%, rgb(177, 244, 207) 100%);border: none;outline: none;color: white;">立即注册</button></p>
        </div>

        <div id="selfaccountloginthere" style="display: block;width: 70%;float: left;">
            <p style="text-align: center;">
                <span  style="color: #666;">自定义账号登录</span>
            </p>
            <p><input autocomplete="off" id="selfaccountloginaccount" type="text" placeholder="账号"></p>
            <p><input autocomplete="off" id="selfaccountloginpassword" type="password" placeholder="密码"></p>
            <p><button id="selfaccountloginbtn"  style="background-image: linear-gradient(to top, rgb(152, 144, 227) 0%, rgb(177, 244, 207) 100%);border: none;outline: none;color: white;">立即登录</button></p>
        </div>

        <!--登陆注册方式的选择列表！！！！-->
        <div id="logintext" style="float: right;width: 25%;">
            
            <ul style="margin-left: -20px;">
                <li style="background-color: transparent;">
                    <img class="closelogintc" src="../../publics/front-stage/img/close (2).png"style="margin-left:80%;width: 20px;height: 20px;">
                </li>
                <li id="emailregister">邮箱注册</li>
                <li id="emailpasswordlogin" >邮箱密码登录</li>
                <li id="emailcodelogin">邮箱验证码登录</li>
                <li id="selfaccountregister">自定义账号注册</li>
                <li id="selfaccountlogin"  style="color: white;background-color: #00a1d6;">自定义账号登录</li>
                <li id="changepassword">找回密码</li>
            </ul>
        </div>
    </div>
<!--导航栏头像的隐藏下拉栏！！-->
<div id="headimgHide" style="display: none;z-index: 9999;">
    <div id="headimgHideTop" style="overflow: hidden;;height: 20%;background-color: #e3b54c;color: white;">
        <p style="float: left;margin-left: 5%;margin-top: 5%;width: 70%;">账号:<span id="iflogin" style="font-size: 0.8em;color: #8a6206;margin-left: 10%;"><a href="http://localhost:3000/myperson" style="text-decoration: none;color: #8a6206"></a></span></p>
        <p style="margin-top: 5%;">
            <button id="tologin" style="display: block;border: none;outline: none;background-color: transparent;color: white;">登录/注册</button>
            <!-- <button style="border: none;outline: none;background-color: transparent;color: white;">切换</button> -->
            <button id="toout" style="border: none;outline: none;background-color: transparent;color: white;">退出</button>
        </p>
    </div>
    <div id="headimgHideContain" style="height: 30%;">
        <p style="float: left;margin-left: 5%;margin-top: 9%;">开通VIP看大片</p>
        <p style="float: right;margin-top: 7%;margin-right: 5%;"><button
               id="hidebutton" style="color: white;padding: 5px;border: none;outline: none;border-radius: 20px ;background-color: #e3b54c;">开通会员</button>
        </p>
    </div>
    <div id="headimgHideBottom" style="height: 50%;">
        <ul style="margin-left: 5%;">
            <a href="/myperson?0" style="color: black;">
                <li>
                    <p>
                        <img src="../../publics/front-stage/img/message.png" style="width: 30px;height: 30px;">
                    </p>
                        
                    <p style="font-size: 0.6em;">消息通知</p>
                </li>
            </a>
            <a href="/myperson?1" style="color: black;">
                <li>
                    <img src="../../publics/front-stage/img/history (3).png" style="width: 30px;height: 30px;">
                    <p style="font-size: 0.6em;">历史记录</p>
                </li>
            </a>
            <a href="/myperson?2" style="color: black;">
                    <li>
                    <img src="../../publics/front-stage/img/shangc.png" style="width: 30px;height: 30px;">
                    <p style="font-size: 0.6em;">创作中心</p>
                </li>
            </a>
            <a href="/myperson?3"style="color: black;">
                <li>
                    <img src="../../publics/front-stage/img/sc (2).png" style="width: 30px;height: 30px;">
                    <p style="font-size: 0.6em;">收藏列表</p>
                </li>
            </a>
        <ul>
            <a style="color: black;" href="/myperson?4">
                <span style="float: right;font-size: 0.6em;margin-top: 3%;margin-right: 7%;">设置中心</span>
               
            </a>
            <!-- <span style="float: right;font-size: 0.6em;margin-top: 2%;margin-right: 2%;">找回密码</span> -->
        </ul>
        </ul>
    </div>
</div>

<div id="vipts" style="display: none;padding: 5px;position: absolute;top: 43px;z-index: 444444444444;left:89%;width: 50px;height: 13px;border:none;font-size: 0.6em;background-color: transparent;">
    <span style="color: white;">vip频道</span>
    </div>

    <div id="hideqb" style="z-index: 444444;display: none;position: absolute;top: 64px;width: 80%;height: 105px;margin-left: 10%;transition: all 0.5s;background-color: rgb(41 42 47);color: #E0E0E0;">
        <div>
            <ul>
                <li>电影</li>
                <li>电视剧</li>
                <li>综艺</li>
                <li>动漫</li>
                <li>儿童</li>
                <li>纪录片</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>知识</li>
                <li>游戏</li>
                <li>风云榜</li>
                <li>公益</li>
                <li>娱乐</li>
                <li>体育</li>
                <li>泡泡</li>
                <li>资讯</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>搞笑</li>
                <li>汽车</li>
                <li>生活</li>
                <li>音乐</li>
                <li>军事</li>
                <li>母婴</li>
                <li>健康</li>
                <li>科技</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>VR</li>
                <li>漫画</li>
                <li>直播中心</li>
                <li>应用商店</li>
                <li>小说</li>
                <li>爱奇艺号</li>
                <li>会员精选</li>
            </ul>
        </div>

    </div>


        <!--顶部内容-->
        <div id="Top">
            <div id="topLeft" style="width: 40%;height: 60px;">
                <!--logo-->
                <!--logo后面的字-->
                <div>
                    <a href="http://localhost:3000/myperson" style="text-decoration: none;">
                        <p style="position: relative;top: 30%;margin-left: 25%;width: 70%;height: 50px;font-size: 1.3em;color: #fff;">
                            <span style="float: left;">
                            <a href="/index">
                                <img src="/publics/front-stage/img/xmlogo.png" style="position: relative;top: -7px;width: 50px;height: 50px;">
                            </a>
                            </span>
                            
                            <span>
                                <a style="position: relative;top: -25px;text-decoration:none; color: #E0E0E0;" href="/index">
                                    <b>贼好看</b>
                                </a>
                            </span>
                        </p>
                    </a>
                </div>
                <div>
                    <ul style="position: relative;top: 39%;color: #ffe5de;">
                        <li><a style="text-decoration: none;color:#ffe5de;" href="/teleplay">电视剧</a></li>
                        <li><a href="/movie" style="text-decoration: none;color: #ffe5de;">电影</a></li>
                        <li id="qb">
                            <span>全部</span>
                            <img id="show" src="../../publics/front-stage/img/show.png" style="    position: absolute;top: 12%;width: 15px;height: 15px;left: 56%;">
                        </li>
                    </ul>
                </div>
                
            </div>
            <div id="topRight">
                <!--顶部右侧内容-->
                <!--搜索框！！-->
                <div id="search" style="width: 40%;margin-left: 20%;border-radius: 100px;border: 2px solid #e3b54c;height: 70%;position: relative;top: 30%;z-index: 4444444;">
                    <form style="height: 100%;position: relative;" onsubmit="return false;">
                        <input  autocomplete="off"  id="searchinput"  type="text" placeholder="飞哥与小佛"   autocomplete="off" style="text-indent: 20px;position: absolute;float: left;width: 80%;height: 100%;border-radius:100px ;border: none;outline: none;background-color: black;">
                        <input id="gosearch" type="button"  value="全网搜" style="font-size:0.8em; height:100%;float: right;border-radius: 100px;margin-right: 3%;background-color: transparent;color: #f8c67e;border: none;">
                        <!--推荐搜索的内容！！！！-->
                    </form>
    
                    <div id="hidesearchinput" style="overflow: hidden;margin-top: 10px;display: none;background-color: black;width: 80%;height: 330px;">
                            <h3 style="color: #666;font-size: 0.8em;margin-left: 2%;margin-top: 2%;">热搜榜</h3>
                            <ul id="searchinputlis" style="list-style: none;padding: 0;margin: auto;">
                               
                            </ul>
                    </div>
                </div>
    
                <!--各种各样的图标！！！-->
                <div id="allgoods"  style="width: 18%;margin-left: 18%;position: relative;top: 25%;">
                    <ul style="list-style: none;">
                        <li id="vipbz"><img src="../../publics/front-stage/img/VIP.png" style="width: 40px;height: 50px;position: relative;top: -5px;"></li>
                        <!-- <li id="czzxbz"><img src="../../publics/front-stage/img/shangc.png" style="margin-top: 10%;width: 25px;height: 25px;"></li>
                        <li id="historybz"><img src="../../publics/front-stage/img/history (2).png" style="margin-top: 10%;width: 25px;height: 25px;"></li>
                        <li id="messagebz"><img src="../../publics/front-stage/img/message.png" style="margin-top: 10%;width: 25px;height: 25px;"></li> -->
                    <span id="showhide">
                            <li id="headimg">
                                <img id="topheadimg" src="../../publics/front-stage/img/headimg.gif"
                                    style="float: left;border-radius: 50%;margin-top: 5px;width: 100%;height: 100%;">
                                    
                            </li>
                            <li style="margin-left: 0%;margin-top: 9%;">
                            
                                <img src="../../publics/front-stage/img/show.png" style="width: 15px;height: 15px;position: absolute;top: 30%;left: 68%;">
                            </li>
                    </span>
    
                    </ul>
                    
                </div>
            </div>
        </div>

            <!--开通会员弹窗！！！！！-->
    <!--弹窗是有一个遮罩层的，遮罩层上面可以呈现具体内容！！！-->
        <!--遮罩层！！！-->
        <div id="cover"></div>
        <!-- //弹出框 -->
        <div id="modal">
            <!--挽留的弹窗！！！！-->
            <div id="wlcover"></div>
                            
            <div id="wl" style="margin-top: 20%;display: none;width: 400px;height: 200px;">
                <div id="wlTop" style="height: 50px;background: linear-gradient(120deg,#fff7ec,#ffcb7e);">
                    <h3 style="text-align: center;position: relative;top: 25%;">聚好看</h3>
                </div>
                <div id="wlContain" style="margin-top: 5%;">
                    <p style="text-align: center;">新用户专享第一个月6元</p>
                </div>
                <div id="wlBottom" style="margin-top: 5%;">
                    <button id="yesclose" style=" margin-top: 5%;margin-left:15%;background-color: #f0f0f0;">狠心离开</button>
                    <button id="noclose" style="background: linear-gradient(134deg,#fee3be,#f8c67e);">考虑考虑</button>
                </div>
            </div>


            <div id="modaltop" style="background-color: black;height: 110px;">
                <div style="width: 100%;height: 25%;">
                    <span style="margin-left: 20px;margin-top: 5px;float: left;color: #ffd38b;">vip会员</span>
                    <img id="closes" src="../../publics/front-stage/img/close (2).png"style="margin-top: 10px;margin-right: 10px;width: 30px;height: 30px;float: right;">
                </div>
                <div style="width: 100%;height: 40%;margin-left: 40px;">
                    <img id="vipviewheadimg" src="../../publics/front-stage/img/headimg.gif"
                        style="position: relative;top: 15px;border-radius: 50%;border: 3px solid #ffd38b;width: 40px;height: 40px;">
                    <span style="color: white;"><span id="vipnickname" style="margin-left: 5%;color: #ffd38b;"><a
                                href="/myperson"
                                style="text-decoration: none;font-size: 0.8em;color: #ffd38b;"></a></span><span id="vipaccount"
                            style="margin-left: 2%;"></span><span id="toontherzh"
                            style="color:#ffd38b ;margin-left: 5%;">切换账号</span>
                        <p style="margin-top: 5px;margin-left: 13%;font-size: 0.8em;color: gainsboro;">
                            <span id="wordone">您的vip会员将于<span id="viptime">35</span>过期</span>
                            <span id="wordtwo">购买套餐成为会员</span>
                        </p>
                </div>
                <!-- <div style="margin-top: 40px;color: #ffd38b; width: 100%;height: 30%;background-color: black;">
                    <p style="text-align: center;">
                        黄金VIP会员
                    </p>
                </div> -->
                <button id="btn" style="display: block;background-color: #666;opacity: 0.5;">
                    <img src="../../publics/front-stage/img/rightjt.png" style="width: 30px;height: 30px;">
                </button>
                <button id="leftbtn" style="background-color: #666;opacity: 0.5;">
                    <img src="../../publics/front-stage/img/leftjt.png" style="width: 30px;height: 30px;">
                </button>
                <!-- <div style="margin-top: 39px;height: 70%;">
                    <ul id="viptext" style="list-style: none;float: left;height: 100%;padding: 0;margin: 0;width: 100%;text-align: center;">
                        <li style="float: left;width: 50%;background: linear-gradient(120deg,#fff7ec,#ffcb7e);color: white;height: 70px;border-radius: 10px;">
                            <span style="position: relative;top: 40%;">黄金VIP</span>
                        </li>
                        <li style="float: right;width: 50%;height: 70px;">
                            <span  style="position: relative;top: 40%;">璀璨VIP</span>
                        </li>
                    </ul>
                </div> -->
                <div id="allways" style="overflow: hidden;margin-top: 50px;width: 100%;height: 150px;">
                    <!--这里还有一个小的轮播图！！！-->
                    


                    <!--黄金vip！！！！！！-->
                    <div id="hhh" style="overflow: hidden;">
                        {{each allonevip}}
                        <!-- style="background: linear-gradient(120deg,#fff7ec,#ffcb7e);" -->
                            <div class="allonevipdiv">
                                <p style="margin-top: 10%;color: #582f1d;text-align: center;">
                                    {{$value.vipName}}
                                </p>
                                <p style="display: none;"  class="vipid">
                                    {{$value.vipId}}
                                </p>
                                <p style="text-align: center;margin-top: 10%;">
                                    <span style="color: #582f1d;font-size: 1.1em;">
                                        ¥{{$value.price}}
                                    </span>
                                </p>
                                <!-- <span style="color: #582f1d;margin-top: 10%;">
                                    <button
                                        style="width: 70%;background: linear-gradient(120deg,#fff7ec,#ffcb7e);;margin-top: 10%;margin-left: 20%;height: 20%;border-radius: 10px;color: #582f1d;border: none;outline: none;border: 1px solid #582f1d;">
                                        次年续费218元
                                    </button>
                                </span> -->
                            </div>
                        {{/each}}
              
                    </div>
             


                </div>
                <div id="vipcontainBottom" style="height: 140px;">
                    <!-- <span id="words"
                        style="margin-top: 40px;margin-left: 2%;font-size: 0.6em;color: gray;">到期将按每年218元自动续费，可随时取消，已签约连包的用户购买则将以新签约的价格续费。</span> -->
                    <!--扫码支付环节-->
                    <div style="color: #582f1d; margin-top: 25%;">

                        <!-- <img src="../../publics/front-stage/img/zfm.jpg" style="margin-top: 5%;margin-left: 30%;width: 15%;height: 15%;"> -->
                        <p id="money" style="margin-top: -15%;margin-left: 5%;font-size: 1.5em;">￥10元</p>
                        <p style="margin-top: 2%;margin-left: 5%;">支持使用支付宝付</p>
                        <p style="margin-top: 2%;margin-left: 5%;color: #666;">
                            <a href="http://localhost:3000/vipserver" style="color: #666;text-decoration: none;color: brown;"><<会员服务协议>></a>
                        </p>
                        <p  id="payapplybtn"
                            style="color: white;opacity: 0.8;padding: 10px;font-size: 1em;text-align: center;width: 18%;border-radius: 18px;margin-left: 70%;margin-top: -10%;background: linear-gradient(to right,#ffb821 0,#ff5c38 45%,#ff1459 100%)">
                            去支付</p>
                    </div>
</div>
                <!--一些官方的话语！！！-->
                <!-- <div>
                    <p style="margin-top: 10%;text-align: right;font-size: 1.2em;">感谢您的使用，祝您生活愉快！</p>
                </div> -->

                <!--充值vip的切换账号提示！！！-->
                <div id="morezhcover"></div>
                
                <div id="morezh" style="display: none;">
                    <div style="background-color: #ffd595;height: 20%;">
                        <p style="text-align: center;color: #582f1d;position: relative;top: 5px;">
                            切换提示
                            <img id="closemorezh" src="../../publics/front-stage/img/close.png" style="float: right;width: 20px;height: 20px;">
                        </p>
                        
                    </div>
                    <div style="background-color: #fff;height: 40%;">
                        <p style="text-align: center;position: relative;top: 5px;">切换账号会退出您当前帐号</p>
                        <p style="text-align: center;margin-top: 10px;">是否确认切换账号？</p>
                    </div>
                    <div id="nomore" style="background-color: #fff;height: 40%;"">
                                                                        <button style=" margin-top: 5%;margin-left:
                        10%;background-color: #f0f0f0;">不切换了</button>
                        <button id="changeqq" style="background: linear-gradient(134deg,#fee3be,#f8c67e);">切换新账号</button>
                    </div>
                </div>

            </div>
        </div>




